<template>
	<!-- 意见反馈 -->
    <view class="page">
		<!-- #ifdef APP-PLUS -->
		<top-set />
		<tab-top fixed="true" title="意见反馈" />
		<!-- #endif -->
        <view class='feedback-title'>
            <text>问题和意见</text>
            <text class="feedback-quick" @tap="chooseMsg">快速键入</text>
        </view>
        <view class="feedback-body">
            <textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare" />
            </view>
        <view class='feedback-title'>
            <text>图片(选填,提供问题截图,总大小10M以下)</text>
        </view>
        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <view class="uni-uploader-head">
                    <view style="font-size: 24upx;">点击预览图片</view>
                    <view class="uni-uploader-info">{{imageList.length}}/8</view>
                </view>
                <view class="uni-uploader-body">
                    <view class="uni-uploader__files">
                        <block v-for="(image,index) in imageList" :key="index">
                            <view class="uni-uploader__file" style="position: relative;">
                                <image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
                                <view class="close-view" @click="close(index)">x</view>
                            </view>
                        </block>
                        <view class="uni-uploader__input-box" v-show="imageList.length < 8">
                        	<view class="uni-uploader__input" @tap="chooseImg"></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class='feedback-title'>
            <text>QQ/邮箱</text>
        </view>
        <view class="feedback-body">
            <input class="feedback-input" v-model="sendDate.contact" placeholder="(必填,方便我们联系你 )" />
        </view>
        <view class='feedback-title feedback-star-view'>
            <text>应用评分</text>
            <view class="feedback-star-view">
                <text class="feedback-star" v-for="(value,key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''" @tap="chooseStar(value)"></text>
            </view>
        </view>
        <button class="feedback-submit" @tap="send">提交</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                msgContents: ["界面显示错乱", "启动缓慢，卡出翔了", "偶发性崩溃"],
                stars: [1, 2, 3, 4, 5],
                imageList: [],
                sendDate: {
                    score: 0,
                    content: "",
                    contact: ""
                }
            }
        }, 
		onLoad() {
			// #ifdef APP-PLUS
			let deviceInfo = {
                appid: plus.runtime.appid,
                imei: plus.device.imei, //设备标识
                p: plus.os.name === "Android" ? "a" : "i", //平台类型，i表示iOS平台，a表示Android平台。
                md: plus.device.model, //设备型号
                app_version: plus.runtime.version,
                plus_version: plus.runtime.innerVersion, //基座版本号
                os: plus.os.version,
                net: "" + plus.networkinfo.getCurrentType()
            }
            this.sendDate = Object.assign(deviceInfo, this.sendDate);
			console.log(JSON.stringify(this.sendDate));
			// #endif 
        },
        methods: {
            close(e){
                this.imageList.splice(e,1);
            },
            chooseMsg() { //快速输入
                uni.showActionSheet({
                    itemList: this.msgContents,
                    success: (res) => {
                        this.sendDate.content = this.msgContents[res.tapIndex];
                    }
                })
            },
            chooseImg() { //选择图片
                uni.chooseImage({
                    sourceType: ["camera", "album"],
                    sizeType: "compressed",
                    count: 8 - this.imageList.length,
                    success: (res) => {
                        this.imageList = this.imageList.concat(res.tempFilePaths);
                    }
                })
            },
            chooseStar(e) { //点击评星
                this.sendDate.score = e;
            },
            previewImage() { //预览图片
                uni.previewImage({
                    urls: this.imageList
                });
            },
//             send() { //发送反馈
//                 if(this.formValidation()){
// 					let imgs = this.imageList.map((value, index) => {
// 					    return {
// 					        name: "image" + index,
// 					        uri: value
// 					    }
// 					})
// 					this.sendDate.imgs = imgs
// 					console.log(this.sendDate)
// 
// 					uni.uploadFile({
// 					    url: "https://service.dcloud.net.cn/feedback",
// 					    files: imgs,
// 					    formData: this.sendDate,
// 					    success: (res) => {
// 					        if (res.statusCode === 200) {
// 					            uni.showToast({
// 					                title: "反馈成功!"
// 					            });
// 								setTimeout(()=>{
// 									uni.navigateBack({
// 										delta: 1
// 									});
// 								},2000)
// 					        }
// 					    },
// 					    fail: (res) => {
// 					        uni.showToast({
// 					            title: "失败",
// 					            icon:"none"
// 					        });
// 					        console.log(res)
// 					    }
// 					});		
// 				}
//             },
			send() { //发送反馈
				if(this.formValidation()){
					this.showToast('反馈成功');	
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
					},2500)
				}
				
				// console.log(JSON.stringify(this.sendDate));
				// let imgs = this.imageList.map((value, index) => {
				// 	return {
				// 		name: "image" + index,
				// 		uri: value
				// 	}
				// })
				// uni.uploadFile({
				// 	url: "https://service.dcloud.net.cn/feedback",
				// 	files: imgs,
				// 	formData: this.sendDate,
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
				// 			uni.showToast({
				// 				title: "反馈成功!"
				// 			});
				// 			this.imageList = [];
				// 			this.sendDate = {
				// 				score: 0,
				// 				content: "",
				// 				contact: ""
				// 			}
				// 			return;
				// 		}
				// 		uni.showToast({
				// 			title: "失败",
				// 			icon:"none"
				// 		});
				// 	},
				// 	fail: (res) => {
				// 		uni.showToast({
				// 			title: "失败",
				// 			icon:"none"
				// 		});
				// 		console.log(res)
				// 	}
				// });
			},
			formValidation(){
				if(!this.sendDate.contact){
					uni.showToast({
						title:"请填写邮箱"
					});
					return false
				}
				if(!this.sendDate.content){
					uni.showToast({
						title:"请填写意见"
					});
					return false
				}
				if(!this.sendDate.score){
					uni.showToast({
						title:"请选择评分"
					});
					return false
				}
				return true;
			}
        }
    }
</script>

<style>
    @font-face {
    	font-family: uniicons;
    	font-weight: normal;
    	font-style: normal;
    	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
    }
    page {
        background-color:rgb(248,248,248);
    }
    view{
        font-size: 28upx;
    }
    .input-view {
        font-size: 28upx;
    }
    .close-view{
        text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
    }
    /* 上传 */
    .uni-uploader {
    	flex: 1;
    	flex-direction: column;
    }
    .uni-uploader-head {
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
		color: rgb(153,153,153);
    }
    .uni-uploader-info {
    	color: #B2B2B2;
		border-radius: 8upx;
    }
    .uni-uploader-body {
    	margin-top: 16upx;
    }
    .uni-uploader__files {
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    }
    .uni-uploader__file {
    	margin: 10upx;
    	width: 210upx;
    	height: 210upx;
    }
    .uni-uploader__img {
    	display: block;
    	width: 210upx;
    	height: 210upx;
    }
    .uni-uploader__input-box {
    	position: relative;
    	margin:10upx;
    	width: 208upx;
    	height: 208upx;
    	border: 2upx solid #D9D9D9;
    }
    .uni-uploader__input-box:before,
    .uni-uploader__input-box:after {
    	content: " ";
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	-webkit-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    	background-color: #D9D9D9;
    }
    .uni-uploader__input-box:before {
    	width: 4upx;
    	height: 79upx;
    }
    .uni-uploader__input-box:after {
    	width: 79upx;
    	height: 4upx;
    }
    .uni-uploader__input-box:active {
    	border-color: #999999;
    }
    .uni-uploader__input-box:active:before,
    .uni-uploader__input-box:active:after {
    	background-color: #999999;
    }
    .uni-uploader__input {
    	position: absolute;
    	z-index: 1;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	opacity: 0;
    }
    
    /*问题反馈*/
    .feedback-title {
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    	align-items: center;
    	padding: 24upx;
    	color: rgb(51,51,51);
    	font-size: 28upx;
		background-color: #fff;
    }
    .feedback-star-view.feedback-title {
    	justify-content: flex-start;
    	margin: 0;
		color: rgb(51,51,51);
		font-size:28upx;
    }
    .feedback-quick {
    	position: relative;
    	padding-right: 40upx;
    }
    .feedback-quick:after {
    	font-family: uniicons;
    	font-size: 40upx;
    	content: '\e581';
    	position: absolute;
    	right: 0;
    	top: 50%;
    	color: #bbb;
    	-webkit-transform: translateY(-50%);
    	transform: translateY(-50%);
    }
    .feedback-body {
		font-size: 24upx;
    	color: rgb(153,153,153);
    }
    .feedback-textare {
    	height: 200upx;
    	font-size: 24upx;
    	line-height: 50upx;
    	width: 100%;
		color: rgb(153,153,153);
    	box-sizing: border-box;
    	padding: 24upx;
    }
    .feedback-input {
    	font-size: 24upx;
		color: rgb(153,153,153);
    	height: 50upx;
    	min-height: 50upx;
    	padding: 15upx 20upx;
    	line-height: 50upx;
    }
    .feedback-uploader {
    	padding: 24upx;
    }
    .feedback-star {
    	font-family: uniicons;
    	font-size: 40upx;
    	margin-left: 6upx;
    }
    .feedback-star-view {
    	margin-left: 20upx;
    }
    .feedback-star:after {
    	content: '\e408';
    }
    .feedback-star.active {
    	color: #FFB400;
    }
    .feedback-star.active:after {
    	content: '\e438';
    }
    .feedback-submit {
		width: 540upx;
		height: 90upx;
		background-color: #3595f9;
		border-radius: 8upx;
    	color: #FFFFFF;
    	margin: 20upx auto;
    }
</style>
